<template>
  <scroll-view :style="{'height': '100vh'}" :scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll" >
  <div class="index" @click="clickHandle('test click', $event)">
    <div class="search">
       <input type="text" placeholder="数据名称/描述/标签">
       <p>搜索</p>
    </div>
    <div class="index-total">已收录报告<span>{{total}}</span>份</div>
    <div class="index-select-top">
      <p  v-for="item in selectTop" v-bind:class="{ classAactive: selectClassAValue === item }"  @click="selectCalssA(item)" v-bind:key="item">{{item}}</p>
    </div>
    <div class="index-value-classB">
      <scroll-view :scroll-x="true" @scroll="lower" >
      <div class="tab">
      <p  v-for="item in selectClassB" v-bind:class="{ classBactive: selectClassBValue === item.id }"  @click="selectCalssB(item)" v-bind:key="item.tille">{{item.name}}</p>
      </div>
      </scroll-view>
      <img @click="scrollLeftList(item)" src="../../../static/images/select.png" alt="">
    </div>
    <div class="data-list">
        <ul> 
          <li @click="bindViewTap(item)" data='1' v-for="item in dataList" v-bind:key="item">
            <div class="logo">
            <img v-bind:src="'http://112.74.47.88:8090/report-res/' + item.cover" alt="">
            </div>
            <div class="data-list-title">
              <div>{{item.name}}</div>
              <p>{{item.createTime}}
                <img v-if="item.isCollection" v-bind:src="'../../../static/images/collect.png'" @click.stop="clickCollect(item, 1 )" alt="">
                <img v-if="!item.isCollection" v-bind:src="'../../../static/images/cancel.png'" @click.stop="clickCollect(item, 2 )" alt="">
              </p>
            </div>
            <div class="data-list-right">
              <div>
                <img src="../../../static/images/see.png" alt=""> 
                 <div>{{item.looktimes}}</div>               
              </div>
              <p><img src="../../../static/images/ellipsis.png" alt="" @click.stop='showModalTab($event)'></p>
            </div>
          </li>
        </ul>
    </div>
  </div>
  </scroll-view>

</template>

<script>
import card from '@/components/card'
import { formatTime, showLoad, showLoadTime, showToast } from '@/utils/index'
// import { get } from '@/utils/http'
import storage from '@/utils/storage'
import s from '@/utils/s'
export default {
  onload () {
    wx.showShareMenu({
      withShareTicket: true
    })
  },
  data () {
    return {
      motto: 'Hello World',
      selectTop: ['最新报告', '订阅报告'],
      selectClassB: [],
      selectClassAValue: '最新报告',
      selectClassBValue: 1,
      total: 0,
      dataList: [],
      userInfo: {},
      page: 1,
      collectId: 0
    }
  },

  components: {
    card
  },
  methods: {
    bindViewTap (item) {
      const url = `/pages/detail/main?id=${item.id}`
      wx.navigateTo({ url })
    },
    // 最新报告按钮tab
    selectCalssA (item) {
      this.selectClassAValue = item
    },
    // 二级筛选条件
    selectCalssB (item) {
      this.selectClassBValue = item.id
      this.dataList = []
      this.page = 0
      this.getReportList(item.name)
    },
    // 点击显示收藏信息
    showModalTab (e) {
      wx.showActionSheet({
        itemList: ['发送邮箱'],
        success: function (res) {
          if (res.tapIndex === 0) {
            const url = `/pages/info/main`
            wx.navigateTo({ url })
          }
        },
        fail: function (res) {
        },
        complete: function (res) {
        }
      })
    },
    scroll () {
    },
    // 滚动加载数据
    scrolltolower () {
      this.getReportList()
    },
    scrollLeftList (item) {
    },
    // 获取报告列表
    getReportList (industry) {
      this.page = this.page + 1
      const $this = this
      // 数据加载动画
      showLoad('加载中')
      wx.request({
        url: s.prefixHttp + `report-service/api/report/list?page=${this.page}&pageSize=${10}&industry=${industry}`,
        method: 'GET',
        success: function (res) {
          wx.hideLoading()
          const data = res.data.data
          if (!data.reports.length) {
            showLoadTime('没有更多数据了')
            return
          }
          for (let i = 0; i < data.reports.length; i++) {
            data.reports[i].createTime = formatTime(new Date(data.reports[i].createTime))
            $this.dataList.push(data.reports[i])
          }
          $this.total = data.total
        },
        fail: function (res) {
        }
      })
    },
    // 获取行业列表
    getReportIndustryList () {
      const $this = this
      console.log('哈哈哈了', storage.get('token'))
      wx.request({
        url: s.prefixHttp + `report-service/api/industry/list`,
        method: 'GET',
        success: function (res) {
          const data = res.data.data
          $this.selectClassB = data.industries
          $this.selectClassBValue = $this.selectClassB[0].id
          $this.getReportList($this.selectClassB[0].name)
        },
        fail: function (res) {

        }
      })
    },
    clickHandle (msg, ev) {
      console.log('clickHandle:', msg, ev)
    },
    // 点击收藏
    clickCollect (item, status) {
      const $this = this
      if (status === 2) {
        wx.request({
          url: s.prefixHttp + `report-service/api/collection/collect/${item.id}`,
          method: 'GET',
          header: {'token': storage.get('token')},
          success: function (res) {
            $this.dataList.forEach(e => {
              if (e.id === item.id) {
                e.isCollection = 1
              }
            })
            showToast('收藏成功')
          },
          fail: function (res) {

          }
        })
      } else if (status === 1) {
        wx.request({
          url: s.prefixHttp + `report-service/api/collection/cancel/${item.id}`,
          method: 'GET',
          header: {'token': storage.get('token')},
          success: function (res) {
            $this.dataList.forEach(e => {
              if (e.id === item.id) {
                e.isCollection = 0
              }
            })
            showToast('取消收藏')
          },
          fail: function (res) {

          }
        })
      }
    }
  },
  onShareAppMessage (res) {
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  },
  created () {
    // 调用应用实例的方法获取全局数据
    this.getReportIndustryList()
  }
}
</script>

<style scoped>
.index {
  font-size: 14px;
  height: 100%;
  /* background: #f8f8f8 */
}
.search {
  display: flex;
  margin-top: 15px;
  padding-bottom: 12px;
  margin: 15px 15px 0 15px;
}
.search input {
  width: 80%;
  height: 35px;
  border: 1px solid #eaeaea;
  color: #999999;
  font-size: 14px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  padding-left: 20px;
}
.search p {
  height: 36px;
  text-align: center;
  width: 20%;
  color: white;
   border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  line-height: 36px;
  padding:0 5px;
  background-color: #01bcd4;
}
.index-total {
  color: #666666;
  margin: 0px 15px 15px 15px;
}
.index-total span {
  color: #fd6e3b;
}
.index-select-top {
  display: flex;
  justify-content: space-between;
  margin:0px 15px 15px 15px;
}
.index-select-top p {
  background: #f8f8f8;
  height: 40px;
  text-align: center;
  line-height: 40px;
  width: 48%;
  color: #999999;
  font-size: 16px;
  border-radius: 3px;
}
.index-value-classB {
  display: flex;
  background: #ffffff;
  margin-bottom: 20px;
  padding: 0 15px;
  overflow: auto
}
.index-value-classB .tab {
  display: flex;
}
.index-value-classB p {
  word-break:keep-all;
  white-space:nowrap;
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
}
.index-value-classB img {
  width: 40px;
  height: 42px;
  position: absolute;
  right: 0;
}
.index-select-top p:first-child{
  margin-right: 4%;
}
.classAactive {
  background-color: #01bcd4 !important;
  color: white !important;
}
.classBactive {
  color: #01bcd4 !important;
  border-bottom:2px solid #01bcd4 !important;
}
/* .scroll-left-style {
  trans
} */
.data-list {
  margin: 0 15px;
}
.data-list ul li {
  display: flex;
  justify-content: space-between;
  border: 1px solid #eaeaea;
  margin-top: 20px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 1px 1px #ccc;
}
.data-list ul li:nth-child(2n) {
  border-right: 5px solid #f5d461;

}
.data-list ul li:nth-child(2n+1) {
  border-right: 5px solid #84e6e7;

}
.data-list ul li .data-list-title {
  padding-left: 10px;
  width: 100%;
}
.data-list ul li .data-list-title div {
  overflow: hidden;
  height: 20px;
  text-overflow:ellipsis;
} 
.data-list ul li .data-list-righ {
  
}
.data-list ul li .data-list-right  div{
    color: #fd6e3b;
    text-align: center;
}
.data-list ul li .data-list-right  div img {
  width: 15px;
  height: 10px;
}
.data-list ul li .data-list-right p img{
  width: 42px;
  height: 22px;
  margin-top: 3px;
  margin-left: 3px;
}
.data-list ul li .data-list-title div {
  font-size: 16px;
}
.data-list ul li .data-list-title p {
  display: flex;
  align-items: center;
   color: #9f9f9f;
   font-size: 14px;
   margin-top: 25px;
}
.data-list ul li .data-list-title p img{
   width: 17px;
   height: 17px;
   padding-left: 10px;
}
.data-list ul li .logo {
  width: 80px;
  height: 65px;
}
.data-list ul li .logo img {
  width: 100%;
  height: 100%;
}
</style>
